 <template> 
<div>
  <!-- <h1 v-if="isLoading">加载中。。。</h1> -->  
<loader-Ing v-if="isLoading" text="我已经拼命加载了"></loader-Ing>
<GlobalHeader :user="currentUser"></GlobalHeader>
<RouterView></RouterView>
<footer class="text-center py-4 text-secondary bg-light mt-6">
<small>
  <ul class="list-inline mb-0">
    <li class="list-inline-item">专栏</li>
    <li class="list-inline-item">文档</li>
    <li class="list-inline-item">详情</li>
    <li class="list-inline-item">地址</li>
    <li class="list-inline-item">联系</li>
</ul>
</small>
</footer>
</div>
</template>
<script lang="ts">
import { Computed,defineComponent,onMounted } from 'vuex';
import GlobalHeader from "./components/GlobalHeader.vue";
import { useStore } from 'vuex';
import { GolbalDataProps } from "./store";
import  loaderIng from "axios";
import { computed } from '@vue/reactivity';
import { awaitExpression } from '@babel/types';
export  default defineComponent({
    name:"App",
    components:{
      GlobalHeader,
      loaderIng,
    },
    setup(){
      const store =useStore<GolbalDataProps>();
      const currentUser= computed(()=> store.state.user) ;
      const isLoading= computed(()=>store.state.loading);
      const token= computed(()=>store.state.token);
      onMounted(()=>{
        //isLogin为false头部显示的为登录和注册 就算是token保存到本地也没有意义
        //islogin为true 头部显示的是  你好XXX 此时XXX 并没有获取到用户信息，前提是已经保存了token
        //为什么isLogin要取反 他的初始值为false 在第一次登录之后值为true但是在刷新的时候就会变为初始值 false
        if(!currentUser.value.isLogin && token.value){
          axios.defaults.headers.common.Authorization=`Bearer ${token.value}`;
          // 再次获取用户信息，使XXX变成我们登录的用户名
          store.dispatch("fetchCurrentUser");
          } 
      });
    return {
      currentUser,
      isLoading,
    };
        },
});








</script>



































<!-- <template>
  <div>
    <global-header :user="currentUser"></global-header>
    <form>
      <div class="mb-3">
        <label for="exampleFromControlInput1" class="form-label">邮箱地址</label>
        <!-- <input type="email"
           class="from-control"
          id="exampleFromControlInput1"
          v-model="emailRef.val"
          @blur="validateEmail"> -->
          <!-- 提示信息 -->
       
      </div>
      <div class="mb-3">
        <label for="exampleFromControlTextarea1" class="from-label">密码</label>
        <input type="password" class="form-control" />
      </div>
    </form>
    <colmun-list :list="list"></colmun-list>
  </div>
</template>

<script lang="ts">
import { defineComponent } from  'vue'
import GlobalHeader, { UserProps } from './components/GlobalHeader.vue'
import ColmunList, { ColumnProps } from  './components/ColmunList.vue'
import ValidateInput, { RulesProp } from  './components/ValidateInput.vue'


// 专栏列表数据
const testData: ColumnProps[] = [
  {
    id: 1,
    title: "text的专栏",
    description: "这个非常有意思",
    avatar: "",
  },
  {
    id: 1,
    title: "test的专栏",
    description: "这个非常有意思",
    avatar:
    "https://lmg.jj20.com/up/allimg/1114/062621110J7/210626110J7-10-1200.jpg",
  },
  {
    id: 1,
    title: "test的专栏",
    description: "这个非常有意思",
    avatar:
      "https://scpic.chinaz.net/files/default/imgs/2023-04-09/15fd9204840769b7.jpg",
  },
]
//用户信息和登录状态
const currentUser: UserProps = {
  isLogin: false,
  name: '迪迦奥特曼'
}
//邮箱正则
// const emailReg=/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
export default defineComponent({
  name: 'App',
  components: {
    ColmunList,
    GlobalHeader,
    ValidateInput
   },
  setup() {
      const emailRules : RulesProp= [
      // 这个是邮箱的规则，应该被这个东西所约束 
      { type: 'required', message: '电子邮箱地址不能为空' },   //这个是必填项
      { type: 'email', message: '请输入正确的电子邮箱格式'}
 ]
  //  //邮箱的验证规则
  //  const emailRef=reactive({
  //   val:'', //内容
  //   error:false, //返回一个错误，就是给它一个错误信息
  //   message:'' //返回的错误信息
  //   })
  //   //失焦事件
  //   const validateEmail=()=>{
  //     // console.log(emailRef.val)
  //     if(emailRef.val.trim() === '') {
  //       emailRef.error=true
  //       emailRef.message='邮箱不能为空'
  //     }else if(!emailReg.test(emailRef.val)) {
  //       emailRef.error=true
  //       emailRef.message='输入的邮箱格式不正确'
  //     }
  //   }
   return {
      list: testData,
      currentUser,
      // emailRef,
      emailRules
      // validateEmail
      }
  }
})
</script>

 -->
